<template>
  <div id="app" class="position-relative container-fluid">
    <HelloWorld :arr="arr" :setarr="setarr" group="name"></HelloWorld>
    <topbutton group="name"></topbutton>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import topbutton from "./components/topbutton.vue";
const group = {
  base: "base",
  group: "group",
};
export default {
  name: "App",
  data() {
    return {
      group,
      arr: [["a1"]],
    };
  },
  watch: {
    // arr: {
    //   handler(v) {
    //     console.log(v);
    //   },
    //   deep: true,
    // },
  },
  methods: {
    setarr(_index, brr) {
      console.log(brr);
      this.arr = brr;
    },
  },
  components: {
    HelloWorld,
    topbutton,
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  width: 100vw;
  height: 100vh;
}
</style>
